<!--
 * @Author: 吴世扬 18368095041@163.com
 * @Date: 2022-11-07 11:10:16
 * @LastEditors: 吴世扬 18368095041@163.com
 * @LastEditTime: 2022-11-07 12:04:51
 * @FilePath: /grid-center-datav/src/components/LabelRankBarProcess/index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<script lang="ts" setup name="LabelRankBarProcess">
const props = withDefaults(
    defineProps<{
        list: {
            label: string;
            rank: number;
            children: number[];
            total: number;
        }[];
        dimension: string[];
    }>(),
    {
        list: () => [],
        dimension: () => []
        // label: '',
        // rank: 0,
        // percent: 0,
        // num: 0
    }
);
</script>

<template>
    <div class="process-container">
        <div class="legend">
            <div class="item" v-for="(item, index) in dimension" :key="index">
                <div class="block" :class="[index % 2 === 0 ? 'blue-style' : 'pink-style']"></div>
                <div class="label">{{ item }}</div>
            </div>
        </div>
        <div class="body">
            <template v-for="(item, index) in props.list" :key="index">
                <div class="label">{{ item.label }}</div>
                <div class="rank">TOP{{ item.rank }}</div>
                <div class="bar-wrap">
                    <div
                        class="bar"
                        v-for="(it, ind) in item.children"
                        :class="[ind % 2 === 0 ? 'blue-style' : 'pink-style']"
                        :key="ind"
                        :style="{ width: (it / 60) * 100 + '%' }"
                    >
                        <div>{{ it }}</div>
                    </div>
                </div>
                <div class="number">{{ item.total }}</div>
            </template>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.process-container {
    width: 100%;
    .legend {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-end;
        margin-bottom: vh(10);
        .item {
            margin-right: vh(17);
            display: flex;
            flex-direction: row;
            align-items: center;
            .block {
                width: vh(20);
                height: vh(10);
                margin-right: vh(4);
            }
            .label {
                font-size: vh(12);
                color: #ffffff;
            }
        }
    }
    .body {
        display: grid;
        grid-template-columns: auto auto 1fr auto;
        grid-template-rows: auto;
        grid-column-gap: vh(8);
        grid-row-gap: vh(8);
        width: 100%;
        .label {
            color: #ffffff;
            font-size: vh(12);
            text-align: right;
        }
        .rank {
            color: #2dccff;
            font-size: vh(12);
        }
        .bar-wrap {
            font-family: 'DIN';
            font-size: vh(12);
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.04);
            height: vh(12);
            box-sizing: content-box;
            display: flex;
            align-items: center;
            .bar {
                height: vh(12);
                line-height: vh(12);
                color: #ffffff;
                padding-left: vh(4);
            }
        }
        .number {
            font-size: vh(16);
            color: rgba(255, 255, 255, 0.85);
            padding: 0 vh(12);
        }
    }
}
.blue-style {
    background: linear-gradient(
        270deg,
        #4bbeff -0.37%,
        rgba(117, 127, 223, 0.5) 100%
    );
}
.pink-style {
    background: linear-gradient(
        270deg,
        #ed589d 0%,
        rgba(117, 127, 223, 0.5) 99.63%
    );
}
</style>
